<template>
  <div class="main base-width">
    <div class="breadcrumb">
      <a href="">票务网></a>
      <a href="">演唱会>
        <span>【西安站】【薛之谦】《天外来物》巡回演唱会</span>
      </a>
    </div>
    <div class="sy">
      <div class="left">
        <img src="../../assets/2.jpg" alt="" />
        <div class="left-list">
          <i></i>
          <span>7777人浏览</span>
          <i></i>
          <span>122人想看</span>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <div class="dz">
            <h3>【西安站】【薛之谦】《天外来物》巡回演唱会</h3>
            <span>2023.07.01-2023.07.02 西安奥体中心体育场</span>
          </div>
          <div class="sm">
            <span>【预售说明】本节目尚在预售中，由于演出票务特殊性，预售订单一经下单，不接受无理由退款</span>
          </div>
          <div class="right-middle">
            <div class="xzcc">
              <h4>选择场次：</h4>
              <ul>
                <li>
                  <button>
                    2023.07.01周六19:30
                    <span>预售中</span>
                  </button>
                  <button>
                    2023.07.02周日19:30
                    <span>预售中</span>
                  </button>
                </li>
              </ul>
            </div>

            <div class="xzpm">
              <h4>选择票面：</h4>
              <ul>
                <li>
                  <button>1000元</button>
                  <button>2000元</button>
                  <button>3000元</button><br />
                  <button>4000元</button>
                  <button>5000元</button>
                  <button>6000元</button>
                </li>
              </ul>
            </div>

            <div class="xzsl">
              <h4>选择数量：</h4>
              <ul>
                <li>
                  <button>-</button>
                  <b>1</b>
                  <button>+</button>
                </li>
              </ul>
            </div>

            <div class="hj">
              <h4>合计：</h4>
              <ul>
                <li>
                  <b>xxx元</b>
                  <span>xxx元/张</span>
                </li>
              </ul>
            </div>
            <button @click="$router.push('/content/address')">立即预定</button>
          </div>
        </div>
      </div>
    </div>

    <div class="heng">
      <div class="tit">
        <span>演出介绍</span>
        <span>购买流程</span>
        <span>购票须知</span>
      </div>
    </div>
    <div class="leg">
      <div class="left">
        <ul class="content-text">
          <h4>演出介绍</h4>
          <p>
            薛之谦“天外来物”巡演持续上演 2023歌单造型全升级
            自2021年巡演开启,“天外来物”不断在观演人次与开票数据上创造着惊喜。“天外来物”演出现场,既有创新式实景搭建硬核科技感的舞美,又有薛之谦高质量唱演呈现出的精妙构思的音乐故事;更有薛之谦自2006年发布同名专辑《薛之谦》以来,长达17年在音乐领域的深耕与坚持。《认真的雪》、《演员》、《丑八怪》、《刚刚好》等代表作脍炙人口、传唱度非凡,万人合唱的盛况场场上演。
          </p>
          <img class="p1" src="../../assets/101.jpg" alt="" />
          <p>
            “天外来物”寓意颇丰，视觉设计未来感炸裂此次巡演以薛之谦第十一张专辑《天外来物》命名，并沿用“天外来物”作为演唱会的主题概念，包含着薛之谦对于音乐和生活的独到见解。快节奏的生活使得许多人容易忽略生活中的美好而变得急功近利，《天外来物》的核心概念正是想借音乐的抒发，希望每个人都能够在心中保留一块单纯善良的净土。
          </p>
          <img class="p2" src="../../assets/102.jpg" alt="" />
          <p>
            除了在音乐上延续了“薛式风格”,此次演唱会中还加入了各种全新的视觉元素,三巡的主视觉海报便是充满科技感,薛之谦的眼中藏着电子机械的纹理,脸部皮肤内嵌芯片,并且还写有编号NO.0717,而这串数字正是薛之谦的生日，无论是从上述的细节，还是从薛之谦冷然空洞的表情神态,都呈现出完整的机器人元素,这也恰恰暗示了薛之谦此次演唱会中“0717号星际执行官”的身份。
          </p>
          <img class="p3" src="../../assets/103.jpg" alt="" />
          <p>
            实力歌手演绎视听盛宴，“唱”“演”结合引全网期待本次薛之谦巡回演唱会的舞美效果也是费了一番心,精心打造了充满未来感的舞台呈现,实景搭建了巨型宇宙飞船、欲望之塔、旋转木马等场景,一方面呼应天外来物的主题,另一方面,也贴合了演唱会的“主线剧情”发展,以“唱”“演”结合的方式创新将演唱会带入全新维度,为观众带来真正意义上的视听盛宴。
          </p>
          <img class="p4" src="../../assets/104.jpg" alt="" />
        </ul>
        <div class="online">
          <span>网上订购流程</span>
          <p>
            <img src="../../assets/106.png" alt="" />
          </p>
          <div class="lc">
            <span>选择演出</span>
            <span>确认订单信息</span>
            <span>选择配送方式</span>
            <span>选择支付方式</span>
            <span>完成购票</span>
          </div>
        </div>
        <div class="notice">
          <span>购票须知</span>
          <ul>
            <div class="b1">
              <p>
                <span><img class="m1" src="../../assets/107.png" alt="" /></span>
                <span>限购说明</span><br />
              </p>
              <p>本节目最多购买6张(如有多张票务需求请联系在线客服)</p>
            </div>
            <div class="b2">
              <p>
                <span><img class="m2" src="../../assets/108.png" alt="" /></span>
                <span>入场时间</span>
              </p>
              <p>以活动现场为准</p>
            </div>
            <div class="b3">
              <p>
                <span><img class="m3" src="../../assets/109.png" alt="" /></span>
                <span>发票说明</span>
              </p>
              <p>
                如需开具发票，演出观演结束后可联系在线客服，工作时间: 9:00-21:00
              </p>
            </div>
            <div class="b4">
              <p>
                <span><img class="m4" src="../../assets/110.png" alt="" /></span>
                <span>座位类型</span>
              </p>
              <p>部分演出无座位，具体以现场为准。</p>
            </div>
            <div class="b5">
              <p>
                <span><img class="m5" src="../../assets/111.png" alt="" /></span>
                <span>退换政策</span>
              </p>
              <p>
                票品不支持退换票，如无法正常观看，可尽早通过摩天轮转票进行处理，给您带来不便敬请谅解
              </p>
            </div>
            <div class="b6">
              <p>
                <span><img class="m6" src="../../assets/112.png" alt="" /></span>
                <span>购票须知</span>
              </p>
              <p>
                部分剧场售出的实体票，票面显示价格为系统出票价（折扣价），票档对应的座位区域不会受影响，介意者慎购！
              </p>
            </div>
          </ul>
        </div>
      </div>
      <div class="right">
        <div class="right-2">
          <h3>相关演出</h3>
          <div>
            <img src="../../assets/2.jpg" alt="" />
            <div class="item">
              <span class="tit">【西安站】强实名「许巍」《无尽光芒》巡回演唱会不可转让不可退</span><br />
              <div>
                <span class="time">2023.05.27</span>
                <span class="map">陕西省体育场</span>
              </div>
            </div>
          </div>
          <div>
            <img src="../../assets/3.jpg" alt="" />
            <div class="item">
              <span class="tit">【西安站】强实名「许巍」《无尽光芒》巡回演唱会不可转让不可退</span><br />
              <div>
                <span class="time">2023.05.27</span>
                <span class="map">陕西省体育场</span>
              </div>
            </div>
          </div>
          <div>
            <img src="../../assets/5.jpg" alt="" />
            <div class="item">
              <span class="tit">【西安站】强实名「许巍」《无尽光芒》巡回演唱会不可转让不可退</span><br />
              <div>
                <span class="time">2023.05.27</span>
                <span class="map">陕西省体育场</span>
              </div>
            </div>
          </div>
          <div>
            <img src="../../assets/10.jpg" alt="" />
            <div class="item">
              <span class="tit">【西安站】强实名「许巍」《无尽光芒》巡回演唱会不可转让不可退</span><br />
              <div>
                <span class="time">2023.05.27</span>
                <span class="map">陕西省体育场</span>
              </div>
            </div>
          </div>
          <div>
            <img src="../../assets/15.jpg" alt="" />
            <div class="item">
              <span class="tit">【西安站】强实名「许巍」《无尽光芒》巡回演唱会不可转让不可退</span><br />
              <div>
                <span class="time">2023.05.27</span>
                <span class="map">陕西省体育场</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
div {
  display: flex;
}

ul {
  display: flex;
  list-style: none;
  padding-left: 0;
  flex-direction: column;
}

li {
  margin: 0;
}

button {
  border: 0;
  margin: 5px;
  padding-left: 3px;
}

.main {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;

  >.breadcrumb {
    padding-right: 800px;
    padding-bottom: 50px;

    >a {
      font-size: 10px;
      color: #aaaaaa;
    }
  }

  >.sy {
    justify-content: flex-end;
    margin: 0;
    box-shadow: 0 0 10px 1px rgba(128, 128, 128, 0.157);
    border-radius: 12px;
    background-color: white;
    width: 1108px;
    height: 550px;

    >.left {
      flex-wrap: wrap;

      >img {
        width: 250px;
        height: 350px;

        position: relative;
        right: 40px;
        top: 30px;
        border-radius: 5px;
      }

      >.left-list {
        padding-bottom: 100px;
        padding-left: 30px;
        margin-top: 5px;

        >span {
          font-size: 10px;
        }
      }
    }

    >.right {
      padding-top: 30px;

      >.right-top {
        flex-wrap: wrap;

        >.dz {
          padding-right: 100px;
          align-items: baseline;
          flex-direction: column;
          padding-bottom: 25px;

          >span {
            font-size: 10px;
            padding: 10px;
          }
        }

        >.sm {
          margin: 0;
          padding-bottom: 25px;

          >span {
            font-size: 15px;
          }
        }

        >.right-middle {
          flex-direction: column;
          padding-bottom: 120px;
          padding-right: 0px;

          >.xzcc {
            align-items: center;
            line-height: 20px;
            height: 20px;
            padding-bottom: 80px;

            >ul {
              >li {
                :first-child {
                  background-color: pink;
                  color: #ff465d;
                }
              }
            }

            >h4 {
              color: #68676c;
            }

            >ul {
              >li {
                >button {
                  background-color: #eee;
                  border-radius: 5px;
                  width: 163px;
                  height: 43px;
                }
              }
            }
          }

          >.xzpm {
            align-items: center;
            line-height: 20px;
            height: 20px;
            padding-bottom: 80px;

            >ul {
              width: 650px;
              display: flex;
              flex-direction: row;

              >li {
                :first-child {
                  background-color: pink;
                  color: #ff465d;
                }
              }
            }

            >ul {
              >li {
                >button {
                  background-color: #eee;
                  border-radius: 5px;
                  width: 163px;
                  height: 43px;
                }
              }
            }
          }

          >.xzsl {
            align-items: center;
            line-height: 20px;
            height: 20px;
            padding-bottom: 40px;

            >ul {
              >li {
                >button {
                  background-color: #eee;
                  border-radius: 5px;
                  width: 25px;
                  height: 25px;
                }
              }
            }
          }

          .hj {
            align-items: center;
            line-height: 20px;
            height: 20px;
            padding-bottom: 20px;

            >ul {
              >li {
                >b {
                  font-size: 26px;

                  color: red;
                }
              }
            }
          }

          >button {
            width: 180px;
            height: 50px;
            border-radius: 50px;
            background: linear-gradient(to right, #ff4284, #ff465d);
            border: 0;
            color: white;
          }
        }
      }
    }
  }

  >.heng {
    display: flex;
    left: 0;

    >.tit {
      display: flex;
      margin: 10px;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;

      :nth-child(1) {
        border-bottom: 1px solid red;
        font-size: 1.3em;
      }

      >span {
        padding: 35px;
      }
    }
  }

  >.leg {
    >.left {
      flex-direction: column;
      width: 800px;
      align-items: center;
      background: #fff;

      >.content-text {
        font-size: 10px;
        line-height: 25px;

        >h4 {
          text-align: center;
        }
      }

      >ul {
        width: 500px;
      }

      >.online {
        flex-direction: column;
        font-size: 10px;

        >span {
          text-align: center;
        }

        >.lc {
          justify-content: space-between;
        }
      }

      >.notice {
        flex-direction: column;
        font-size: 10px;
        margin-left: 130px;

        >span {
          text-align: center;
          margin: 10px;
        }

        >ul {
          >div {
            display: flex;
            flex-direction: column;

            >div {
              >span {
                >img {
                  width: 10px;
                  height: 10px;
                  margin: 3px 5px;
                }
              }
            }

            >p {
              font-size: 14px;
              margin: 5px 20px;
            }
          }
        }

        >div {
          flex-wrap: wrap;
        }
      }
    }

    >.right {
      width: 288px;
      margin-left: 30px;

      >.right-2 {
        margin: 10px;
        flex-direction: column;

        >div {
          margin: 10px;
        }

        img {
          width: 70px;
          height: 90px;
        }

        .item {
          flex-direction: column;

          >span {
            font-size: 10px;
          }
        }
      }
    }
  }
}</style> 